<template>
  <div class="box">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo top"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item>
        <router-link to="/">
          <img src="./img/logo_0.png" alt="" srcset="" />
        </router-link>
      </el-menu-item>
      <el-menu-item index="1"
        ><router-link to="/">首页</router-link></el-menu-item
      >
      <el-menu-item index="2"
        ><router-link to="/dasai">大赛</router-link></el-menu-item
      >
      <el-menu-item index="3"
        ><router-link to="/vip">VIP中心</router-link></el-menu-item
      >
      <el-menu-item index="4"
        ><router-link to="/qianyue">签约入驻</router-link></el-menu-item
      >
      <el-menu-item class="login" @click="btn">登录</el-menu-item>
    </el-menu>
    <div class="dlv" v-show="have">
      <div class="d1">
        <div class="e1">
          <div class="dd1">
            <a href="javascript:;" @click="bntr"></a>
            <h3>安全登录，防止被盗</h3>
            <img src="./img/dlewm.png" alt="" />
            <p>使用全民K歌手机版扫描二维码</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      have: false,
    };
  },
  methods: {
    handleSelect(key, keyPath) {},
    btn() {
      this.have = true;
    },
    bntr() {
      this.have = false;
    },
  },
};
</script>
<style scoped>
.el-menu-item {
  font-size: 18px;
  color: #000;
  line-height: 100px;
  height: 100px;
}
.el-menu.el-menu--horizontal {
  border-bottom: 1px solid transparent;
}
.el-menu-item:hover {
  color: #ff2600 !important;
}
.is-active {
  border-bottom: 4px solid #ff2600 !important;
}

.box .top .login {
  float: right;
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  color: #000;
}
.box .top li {
  height: 100px;
  line-height: 100px;
}
/* 登录 */
.box .dlv {
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.box .d1 {
  position: relative;
  height: 100%;
}
.box .top a {
  color: #000;
}
.box .e1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box .dd1 {
  width: 308px;
  height: 384px;
  padding: 28px 14px;
  border: solid 2px #ddd;
  background-color: #fff;
  position: relative;
}
.box .dd1 a {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 20px;
  height: 20px;
  text-indent: -999em;
  overflow: hidden;
  background: url("./img/sprite.png") no-repeat -60px 0;
}
.box .dd1 a:hover {
  background-position: -90px 0;
}
.box .dd1 h3 {
  margin-bottom: 34px;
  text-align: center;
  font-size: 16px;
  color: grey;

  font-weight: 400;
}
.box .dd1 img {
  display: block;
  margin: 20px auto;
}
.box .dd1 p {
  display: inline-block;
  margin: 0 15px;
  padding: 8px 15px;
  font-size: 14px;
  color: grey;
  border-radius: 99px;
  text-align: center;
  background-color: #f6f6f6;
}
.box .logo {
  position: relative;
  margin-right: 30px;
}
</style>
